@charset "UTF-8";
@import url('displaFlex');





@safeWidth:1100px;        //安全宽度

@safeMainColor:#01cbe9;       //主题颜色
@safeMinorColor:#ff6f6e;       //主题颜色

@borderColor:#dcdcdc;     //边框颜色
@25mainWordColor:#252525;   //文字主体颜色
@4aviceWordColor:#4a4a4a;   //文字副级颜色
@99minorWordColor:#999999;  //文字次要颜色

@letwinW:420/1920;
@letwinH:420/500;

.w_h(@w_h){
  width: @w_h ;
  height: @w_h ;
}

//文字溢出
//多行
.wordSpaceClamp(@number){
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:@number;
  overflow: hidden;
}
//单行
.wordSpaceClamp{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

.hover(@color){
  &:hover{
    background-color: @color;
    color: #FFFFFF;
    text-shadow: 1px 3px 3px rgba(0, 0, 0, 0.3);
    transition: all 1s cubic-bezier(0, 0.72, 0.35, 1.12);
  }
}

main{
  width: 100%;
  height: 580px;
  .bannerImg{
    height: 100%;
    width: 100%;
  }
  position: relative;
  .mainInner{
    width:@safeWidth;
    height: 100%;
    position: absolute;
    //border: 1px solid #fe6665;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
     .displayFlex;
    .flex-justify-right;
    .flex-align-items;
    .loginBox{

      width:38.181818%;
      height: 500px;

      border-radius: 6px;
      background-color: white;

      .displayFlex;
      .flex-direction-column;

      .flex-align-items;
      .loginTab{
        .displayFlex;
        .flex-direction-row;
        margin-top: 60px;
        margin-bottom: 70px;
        span{
          color: #999;
          font-size: 20px;
          cursor: pointer;
        }
        #puLogin{
          margin-right: 50px;
        }
        .clickSpan{
          color: @safeMinorColor;
        }

      }
      .puLoginBox{
        .displayFlex;
        .flex-direction-column;
        input{
          width: 355px;
          height: 48px;
          border: 1px solid @borderColor;
          border-radius: 4px;
          text-indent: 20px;
          color: @4aviceWordColor;
          margin-bottom: 40px;
          font-size: 16px;


        }
        button{
          width: 355px;
          height: 48px;
          border: 1px solid @safeMinorColor;
          color:@safeMinorColor;
          border-radius: 4px;
          .hover(@safeMinorColor);
        }
        p{
          text-align: right;
          margin-top: 12px;
          font-size: 14px;
          color: @99minorWordColor;
          cursor: pointer;
          &:hover{
            text-decoration: underline;
          }
        }
        .registerForget{
          .displayFlex;
          .flex-direction-row;
          .flex-justify-between;

        }

      }
      .cordLoginPart{
        .phoneBox,.codeBox{
          //.displayFlex;
          //.flex-direction-row;
          //.flex-align-items;
          //.flex-justify;
        }
        .phoneBox{
          input{
            width: 355px;
            height: 48px;
            font-size: 16px;
            color: @4aviceWordColor;
            border-radius: 4px;
            border:1px solid @borderColor;
            text-indent: 20px;
          }
          margin-bottom: 40px;
        }

        .codeBox{
          margin-bottom: 40px;
          height: 48px;

          input{
            width: 190px;
            height: 46px;
            font-size: 16px;
            color: @4aviceWordColor;
            border-radius: 4px;
            border:1px solid @borderColor;
            text-indent: 20px;
            margin-right: 15px;
          }
          .getCode{
            width: 148px;
            height: 100%;
            background: @safeMinorColor;
            color: white;
            font-size: 16px;
            border-radius: 4px;
            .flex-justify-align;
            cursor:pointer;
          }
          .wangyiCode{
            width: 148px;
            height: 48px;
          }
          .getCodeHui{
            background: @99minorWordColor;
            color: @4aviceWordColor;
          }
        }


        .next{
          width: 355px;
          height: 48px;
          display: block;
          margin: 0 auto;

          border: 1px solid @safeMinorColor;
          color:@safeMinorColor;
          border-radius: 4px;
          .hover(@safeMinorColor)
        }



      }
      position: relative;
      .xieyi{
        .displayFlex;
        .flex-align-items;
        .flex-direction-row;
        .flex-justify-content;
        width: 100%;
        color: @99minorWordColor;
        font-size: 14px;
        a{
          color:@safeMainColor;
        }
        position: absolute;
        bottom: 10px;

      }



    }


    .registerBox{

  width:38.181818%;
  height: 500px;


  border-radius: 6px;
  background-color: white;
  .displayFlex;
  .flex-direction-column;

  .flex-align-items;
  .loginTab{
    .displayFlex;
    .flex-direction-row;
    margin-top: 60px;
    margin-bottom: 70px;
    span{
      color: @4aviceWordColor;
      font-size: 20px;
      cursor: pointer;
    }
    #puLogin{
      margin-right: 50px;
    }
    .clickSpan{
      color: @safeMinorColor;
    }

  }

  .part1{
    .phoneBox,.codeBox{
      //.displayFlex;
      //.flex-direction-row;
      //.flex-align-items;
      //.flex-justify;
    }
    .phoneBox{
      input{
        width: 355px;
        height: 48px;
        font-size: 16px;
        color: @4aviceWordColor;
        border-radius: 4px;
        border:1px solid @borderColor;
        text-indent: 20px;
      }
      margin-bottom: 30px;
    }

    .codeBox{
      margin-bottom: 40px;
      height: 48px;
      input{
        width: 190px;
        height: 48px;
        font-size: 16px;
        color: @4aviceWordColor;
        border-radius: 4px;
        border:1px solid @borderColor;
        text-indent: 20px;
        margin-right: 15px;
      }

      .getCode{
        width: 148px;
        height: 100%;
        background: @safeMinorColor;
        color: white;
        font-size: 16px;
        border-radius: 4px;
        .flex-justify-align;
        cursor:pointer;
      }

      .getCodeHui{
        background: @99minorWordColor;
        color: @4aviceWordColor;
      }


    }
    #getLogin{
      text-align: right;
      margin-top: 12px;
      font-size: 14px;
      color: @99minorWordColor;
      cursor: pointer;
      &:hover{
        text-decoration: underline;
      }
    }

    .next{
      width: 355px;
      height: 48px;
      display: block;
      margin: 0 auto;

      border: 1px solid @safeMinorColor;
      color:@safeMinorColor;
      border-radius: 4px;
      .hover(@safeMinorColor)
    }



  }
  position: relative;
  .xieyi{
    .displayFlex;
    .flex-align-items;
    .flex-direction-row;
    .flex-justify-content;
    width: 100%;
    color: @99minorWordColor;
    font-size: 14px;
    a{
      color:@safeMainColor;
    }
    position: absolute;
    bottom: 10px;

  }

}

    .passBox{

      width:38.181818%;
      height: 500px;

      border-radius: 6px;
      background-color: white;
      .displayFlex;
      .flex-direction-column;

      .flex-align-items;
      .loginTab{
        .displayFlex;
        .flex-direction-row;
        margin-top: 60px;
        margin-bottom: 70px;
        span{
          color: @4aviceWordColor;
          font-size: 20px;
          cursor: pointer;
        }

      }

      .part2{
        .phoneBox,.codeBox{
          //.displayFlex;
          //.flex-direction-row;
          //.flex-align-items;
          //.flex-justify;
        }
        .passWordInput{
          input{
            width: 355px;
            height: 48px;
            font-size: 16px;
            color: @4aviceWordColor;
            border-radius: 4px;
            border:1px solid @borderColor;
            text-indent: 20px;
          }
          margin-bottom: 30px;
        }


        .next{
          width: 355px;
          height: 48px;
          display: block;
          margin: 0 auto;

          border: 1px solid @safeMinorColor;
          color:@safeMinorColor;
          border-radius: 4px;
          .hover(@safeMinorColor)
        }



      }




      position: relative;
      .xieyi{
        .displayFlex;
        .flex-align-items;
        .flex-direction-row;
        .flex-justify-content;
        width: 100%;
        color: @99minorWordColor;
        font-size: 14px;
        a{
          color:@safeMainColor;
        }
        position: absolute;
        bottom: 10px;

      }

    }

    .findBox{

      width:38.181818%;
      height: 500px;


      border-radius: 6px;
      background-color: white;
      .displayFlex;
      .flex-direction-column;

      .flex-align-items;
      .loginTab{
        .displayFlex;
        .flex-direction-row;
        margin-top: 60px;
        margin-bottom: 70px;
        span{
          color: @4aviceWordColor;
          font-size: 20px;
          cursor: pointer;
        }
        #puLogin{
          margin-right: 50px;
        }
        .clickSpan{
          color: @safeMinorColor;
        }

      }

      .part1{
        .findBox,.findBox{
          //.displayFlex;
          //.flex-direction-row;
          //.flex-align-items;
          //.flex-justify;
        }
        .phoneBox{
          input{
            width: 355px;
            height: 48px;
            font-size: 16px;
            color: @4aviceWordColor;
            border-radius: 4px;
            border:1px solid @borderColor;
            text-indent: 20px;
          }
          margin-bottom: 30px;
        }

        .codeBox{
          margin-bottom: 40px;
          height: 48px;
          input{
            width: 190px;
            height: 48px;
            font-size: 16px;
            color: @4aviceWordColor;
            border-radius: 4px;
            border:1px solid @borderColor;
            text-indent: 20px;
            margin-right: 15px;
          }

          .getCode{
            width: 148px;
            height: 100%;
            background: @safeMinorColor;
            color: white;
            font-size: 16px;
            border-radius: 4px;
            .flex-justify-align;
            cursor:pointer;
          }

          .getCodeHui{
            background: @99minorWordColor;
            color: @4aviceWordColor;
          }


        }
        #gefindtLogin{
          text-align: right;
          margin-top: 12px;
          font-size: 14px;
          color: @99minorWordColor;
          cursor: pointer;
          &:hover{
            text-decoration: underline;
          }
        }

        .next{
          width: 355px;
          height: 48px;
          display: block;
          margin: 0 auto;

          border: 1px solid @safeMinorColor;
          color:@safeMinorColor;
          border-radius: 4px;
          .hover(@safeMinorColor)
        }



      }
      position: relative;
      .xieyi{
        .displayFlex;
        .flex-align-items;
        .flex-direction-row;
        .flex-justify-content;
        width: 100%;
        color: @99minorWordColor;
        font-size: 14px;
        a{
          color:@safeMainColor;
        }
        position: absolute;
        bottom: 10px;

      }

    }

  }

}

.company{
  width: 1200px;
  height: 350px;
  margin: 0 auto;
  overflow: hidden;
  .title{
    width: 100%;
    height: 120px;
    .displayFlex;
    .flex-justify-align;
    p{
      font-size: 30px;
      color: #3e3e3f;
      margin: 0 auto;
      font-weight: 200;
      font-family: "微软雅黑 Regular";
    }
  }

  .slideTxtBox{
    padding-top: 20px;
    width: 1200px;
    height: 106px;
    margin: 0 auto;
    overflow: hidden;

    ul{
      width: 1200px;
      height: 106px;
      overflow: hidden;


      li{
        float: left;
        width: 260px;
        height: 106px;
        margin: 0 10px;

        img{
          width: 100%;
          height: 100%;
        }

      }
    }
  }
}
